<template>
    <div class="quan">
        <div class="cp-container com-public-pt" v-loading="loading">
            <el-row :gutter="40">
                <el-col :span="18">
                    <div class="keep-l">

                        <div class="single">
                            <div class="item flex">
                                <div><img :src="topicFile + ((spread && spread.logo && spread.logo.fileShowUrl) ? (spread && spread.logo && spread.logo.fileShowUrl) : isLogin.logo)" alt=""></div>
                                <div class="text">
                                    <h3>{{spread.topicClassName ? spread.topicClassName : isLogin.topicClassName}}</h3>
                                    <p>{{spread.topicClassInfo ? spread.topicClassInfo : isLogin.topicClassInfo}}</p>
                                </div>
                            </div>

                            <div class="num">
                                <span>粉丝 {{spread.followNum ? spread.followNum : isLogin.followNum}}</span>
                                <span>帖子 {{spread.postNum ? spread.postNum : isLogin.postNum || 0}}</span>
                            </div>

                            <el-button v-if="$store.state.haslogin" class="add-follow" @click="addDelFollow(spread)">
                                <i class="icon icon-user-tip"></i>
                                {{(spread.isFollow || isLogin.isFollow) ? '取消关注' : '关注'}}
                            </el-button>
                            <el-button type="primary" class="btn" @click="askQuestionClick(currentTopicId)">提问</el-button>
                            <to-login :isFlag="isFlag" @callBackDialog="callBackDialogFn"></to-login>

                            <el-dialog :visible.sync="isLoading" title="提问" :close-on-click-modal="false" width="60%" style="min-width: 530px;">
                                <ask-question @callBackCloseDialing="callBackCloseDialing" :currentTopicId="currentTopicId"></ask-question>
                            </el-dialog>
                        </div>

                        <div class="switch-sort">
                            <span>看帖</span>
                            <a href="javaScript:;" :class="topicQuestionList.sort == 'popular_sort' ? 'cur' : ''"  @click="handleSort('popular_sort')">热门排序</a>
                            <time>|</time>
                            <a href="javaScript:;" :class="topicQuestionList.sort == 'time_sort' ? 'cur' : ''"  @click="handleSort('time_sort')">时间排序</a>
                        </div>

                        <div class="problem_list">
                            <ul class="list" v-if="topicQuestionList.data.length>0">
                                <li v-for="(item, index) in topicQuestionList.data" :key="index">
                                    <h3>{{item.problemTitle}}</h3>
                                    <div class="providers clearfix">
                                        <img
                                            v-if="item.quizUserLogo !== ''"
                                            :src="logoUrl + item.quizUserLogo"
                                            alt=""
                                            class="usser-logo">
                                        <img src="../../../static/img/def-user-logo.png" alt="" class="usser-logo" v-else>
                                        <div class="describe">
                                            <span class="name">{{item.quizUserName}}</span>
                                            <div class="info">
                                                <div class="dec" v-html="htmlStr(item.problemInfo, 200)"></div>
                                                <nuxt-link :to="'/community/quan/detail/' + item.id +'?topicName=' + (spread.topicClassName ? spread.topicClassName : isLogin.topicClassName)">查看更多</nuxt-link>
                                            </div>
                                            <div class="num-info">
                                                <span>{{item.createDate}}</span>
                                                <span class="c-margin"><i class="el-icon-view"></i>{{item.browseNum}}</span>
                                                <span><i class="el-icon-edit-outline"></i>{{item.replyNum}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="no-data" v-if="topicQuestionList.data.length === 0">
                                暂无数据
                            </div>

                            <el-pagination
                                class="public-page"
                                background
                                v-if="problemTotal > 0"
                                :current-page="topicQuestionList.page"
                                :page-sizes="[100, 200, 300, 400]"
                                :page-size="topicQuestionList.size"
                                layout="prev, pager, next"
                                @current-change="changePage"
                                :total="problemTotal">
                            </el-pagination>
                        </div>

                    </div>
                </el-col>

                <el-col :span="6">
                    <div class="keep-r">
                        <div class="follow" v-if="myFollow && myFollow.length > 0">
                            <h4>已关注主题</h4>
                            <div class="my-follow">
                                <div class="li clearfix" v-for="(i, index) in myFollow" :key="index" :class="{crt: currentStyle === index}" @click="swticthData(i,index,)">
                                    <img :src="topicFile + i.logo" alt="" class="icont">
                                    <div class="txt">
                                        <h5>{{i.topicClassName}}</h5>
                                        <div>
                                            <span>关注 {{i.followNum || '0'}}</span>
                                            <span>帖子 {{i.postNum || '0'}}</span>
                                        </div>
                                    </div>
                                    <i class="el-icon-circle-close del" @click="deleteFollow(i.topicClassId)"></i>
                                </div>
                            </div>
                        </div>

                        <div class="all-topic">
                            <h4>全部主题</h4>
                            <div class="all-list" v-if="topicSquare.length>0">
                                <p v-for="(item, index) in topicSquare" :key="index" class="capsuleItem">
                                    <i v-if="item.isFollow" class="el-icon-circle-close el-icon-circle-close-outline" @click="deleteFollow(item.id)"></i>
                                    <i v-else class="el-icon-circle-plus-outline add-i" @click="addFollowTopicBtn(item.id)"></i>
                                    <span @click="changeTopic(item, item.topicClassName)">{{item.topicClassName}}</span>
                                </p>
                            </div>
                            <div class="all-list" v-if="topicSquare.length === 0">
                                暂无数据
                            </div>
                        </div>

                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component
} from 'nuxt-property-decorator'
import {serQuanFileFileUrl} from '../../../../config/server.url.conf'
import {
    allTopicListApi,
    queryMyFollowTopicIds,
    myFollowTopic,
    topicDetaileProblem,
    addFollowTopic, // 添加话题
    topicDetails, // 添加话题
    deleteFollowTopic // 取消话题
} from '~/api/community/quan/index'
import askQuestion from '~/components/community/quan/askQuestion.vue'
import toLogin from '~/components/common/toLogin.vue'
@Component({
    name: 'test',
    layout: 'community',
    components: {
        askQuestion,
        toLogin
    },
    head () {
        return {
            title: '建筑圈-CIIP社群中心 ',
            meta: [
                {hid: 'description', name: 'description', content: 'CIIP社群中心建筑圈，在这里讨论建筑行业话题，了解建筑新观点。'},
                {hid: 'keyword', name: 'keyword', content: '建筑话题，建筑圈子'}
            ]
        }
    }
})
export default class PageQuanIndex extends Vue {
    // 定义data
    private isLogon: boolean = true
    isFlag: boolean = false
    loading: boolean = false
    countNum: number = 50
    topicSquare: any = []
    myFollow: any = []
    isLoading: boolean = false
    topicFile: String = serQuanFileFileUrl
    logoUrl: String = this.$store.state.basefile
    // logoUrl: String = serQuanFileFileUrl
    isLogin: Object = {
        topicClassName: '',
        topicClassInfo: '',
        followNum: '',
        postNum: '',
        logo: ''
    }
    spread: any = {}
    urlParamId: any = ''
    currentPage: number = 1
    currentTopicId: number = 0
    currentStyle: number = 0
    topicQuestionList: any = {
        data: [],
        page: 1,
        size: 10,
        problemStatus: 0,
        topicId: '',
        sort: 'popular_sort',
        topicTitle: '' // 当前话题的标题
    }
    problemTotal: number = 0
    total: number = 0
    htmlStr (str: any, num: any) {
        const val = str.replace(/<\/?.+?>/g, '').replace(/(^\s+)|(\s+$)/g, '').replace(/&nbsp;/ig, '')
        let htmlVal = val || ''
        if (
            val &&
            num &&
            !isNaN(Number(num)) &&
            val.length > num
        ) {
            num = Number(num)
            htmlVal = val.substring(0, num) + '...'
        }
        return htmlVal
    }
    /**
     * 获取url参数 */
    getQueryString (name: any) {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        const r = window.location.search.substr(1).match(reg)
        if (r != null) {
            return unescape(r[2])
        } else {
            return null
        }
    }
    askQuestionClick () {
        if (this.$store.state.haslogin) {
            this.isLoading = true
        } else {
            this.isFlag = true
        }
    }
    callBackDialogFn (bol: boolean) {
        this.isFlag = bol
    }
    callBackCloseDialing (val: boolean) {
        this.isLoading = val
        this.getTopicAllProblem(this.currentTopicId, '', 1)
        // this.addProblemFn()
    }
    /**
     * 问题列表相关方法 */
    handleSort (sortType: String) {
        this.topicQuestionList.sort = sortType
        this.currentPage = 1
        this.getTopicAllProblem(this.currentTopicId, '', this.currentPage)
    }
    /**
     * 我关注的主题方法逻辑 */
    async getMyfollowedTopic () {
        const id = this.$store.state.userinfo.id
        const {data}: any = await myFollowTopic({
            userId: id,
            page: 1,
            size: 50
        })
        if (data.code >= 0) {
            this.myFollow = data.data.content
            this.spreadFun(this.urlParamId !== undefined ? this.urlParamId : this.myFollow[0].topicClassId)
        }
    }
    /**
     * 切换我关注的话题 */
    swticthData (val: any, index: number) {
        this.currentTopicId = val.id
        this.currentStyle = index
        this.spreadFun(val.topicClassId)
        this.getTopicAllProblem(val.topicClassId, val.topicClassName, 1)
    }
    /**
     * 全部主题方法逻辑 */
    async addProblemFn () {
        this.loading = true
        const {data}: any = await allTopicListApi(this.countNum)
        if (data.code >= 0) {
            this.isFollow(data.data)
        }
    }
    /**
     * 判断是否关注了 */
    async isFollow (array: any) {
        const ID = this.$store.state.userinfo.id
        const {data}: any = await queryMyFollowTopicIds({userId: ID})
        if (data.code >= 0) {
            this.loading = false
            const collectArray = data.data
            for (let i = 0; i < collectArray.length; i++) {
                for (let j = 0; j < array.length; j++) {
                    if (collectArray[i] === array[j].id) {
                        array[j].isFollow = true
                    }
                }
            }
            this.topicSquare = array
            if (this.$store.state.haslogin && collectArray.length > 0) {
                if (this.$route.query.t === 'u') {
                    for (let i = 0; i < this.topicSquare.length; i++) {
                        if (Number(this.topicSquare[i].id) === Number(this.$route.query.topicId)) {
                            this.spreadFun(this.topicSquare[i].id)
                            this.getTopicAllProblem(this.topicSquare[i].id, this.topicSquare[i].topicClassName, 1)
                            this.currentTopicId = this.topicSquare[i].id
                        }
                    }
                } else if (this.$route.query.t === undefined) {
                    if (this.$route.query.topicId !== '') {
                        this.spreadFun(this.$route.query.topicId)
                        this.getTopicAllProblem(this.$route.query.topicId, '', 1)
                        this.currentTopicId = Number(this.$route.query.topicId)
                    } else {
                        this.spreadFun(collectArray[0])
                        this.getTopicAllProblem(collectArray[0], '', 1)
                        this.currentTopicId = collectArray[0]
                    }
                }
                this.getMyfollowedTopic()
            } else {
                // 用户没有登录的时候左侧展示的数据
                if (this.$route.query.t === 'u') {
                    for (let i = 0; i < this.topicSquare.length; i++) {
                        if (Number(this.topicSquare[i].id) === Number(this.$route.query.topicId)) {
                            this.spreadFun(this.topicSquare[i].id)
                            this.getTopicAllProblem(this.topicSquare[i].id, this.topicSquare[i].topicClassName, 1)
                            this.currentTopicId = this.topicSquare[i].id
                        }
                    }
                } else {
                    const topId = this.$route.query.topicId
                    if (this.$route.query.t === undefined && topId !== '') {
                        this.spreadFun(topId)
                        this.getTopicAllProblem(topId, '', 1)
                        this.currentTopicId = Number(topId)
                    } else {
                        this.spreadFun(this.topicSquare[0].id)
                        this.getTopicAllProblem(this.topicSquare[0].id, this.topicSquare[0].topicClassName, 1)
                        this.currentTopicId = this.topicSquare[0].id
                    }
                }
                if (this.$route.query.t === undefined && this.$route.query.topicId === undefined) {
                    window.history.pushState({}, '', '?topicId=' + this.topicSquare[0].id)
                    this.spreadFun(this.topicSquare[0].id)
                    this.getTopicAllProblem(this.topicSquare[0].id, this.topicSquare[0].topicClassName, 1)
                    this.currentTopicId = this.topicSquare[0].id
                }
            }
        }
    }
    /**
     * 切换全部主题列表 */
    changeTopic (data: any, title: String) {
        this.currentTopicId = data.id
        this.spreadFun(data.id)
        this.getTopicAllProblem(data.id, title, 1)
    }
    changePage (val: any) {
        this.topicQuestionList.page = val
        this.getTopicAllProblem(this.currentTopicId, '', val)
    }
    /**
     * 根据id获取问题列表 */
    async getTopicAllProblem (id: any, title: any, pageNumber: any) {
        const form = {...this.topicQuestionList}
        delete form.data
        delete form.topicTitle
        form.page = pageNumber
        form.topicId = id
        const {data}: any = await topicDetaileProblem(form)
        if (data.code >= 0) {
            this.topicQuestionList.data = data.data.content
            this.problemTotal = data.data.totalElements
            if (title !== '' && title !== undefined) {
                this.topicQuestionList.topicTitle = title
            }
            this.total = data.data.totalElements
            this.currentTopicId = id
            window.history.pushState({}, '', '?topicId=' + id)
        }
    }
    addDelFollow (data: any) {
        if (data.isFollow) {
            this.deleteFollow(data.id)
        } else {
            this.addFollowTopicBtn(data.id)
        }
    }
    /**
     * 取消关注 */
    deleteFollow (id: number) {
        this.$confirm('确定取消关注吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
        }).then(() => {
            this.deleteFollowFn(id)
        })
    }
    async deleteFollowFn (id: number) {
        const {data}: any = await deleteFollowTopic({
            topicId: id,
            userId: this.$store.state.userinfo.id || ''
        })
        if (data.code >= 0) {
            this.$message.success('取消关注成功')
            this.addProblemFn()
        }
    }
    /**
     * 添加关注 */
    async addFollowTopicBtn (id: any) {
        if (this.$store.state.haslogin) {
            const {data}: any = await addFollowTopic({
                topicId: id,
                userId: this.$store.state.userinfo.id
            })
            if (data.code >= 0) {
                this.$message.success('关注成功')
                this.addProblemFn()
            }
        } else {
            this.isFlag = true
        }
    }
    /**
     * 关注的详情 */
    async spreadFun (Id: any) {
        const {data}: any = await topicDetails({
            id: Id,
            userId: this.$store.state.userinfo.id || ''
        })
        if (data.code >= 0) {
            this.spread = data.data
            this.getTopicAllProblem(this.spread.id, this.topicSquare.topicClassName, 1)
        }
    }
    // mounted
    mounted () {
        this.addProblemFn()
        const thisUrlTopicId = this.getQueryString('topicId')
        let thisUrlTitle = ''
        if (thisUrlTopicId != null) {
            for (let i = 0; i < this.topicSquare.length; i++) {
                if (this.topicSquare[i].id === thisUrlTopicId) {
                    thisUrlTitle = this.topicSquare[i].topicClassName
                }
            }
            return thisUrlTitle
        }
    }
}
</script>

<style lang="scss" scoped>
    $default-font-size: 14px;
    $min-font-size: 12px;
    $mid-font-size: 16px;
    $max-font-size: 18px;
    $bid-font-size: 24px;
    $gray: #999;
    $black: #333;
    $orange: #ddd;
    $switchBg: #edf4f9;
    .quan{
        padding-top: 20px;
        background: #f8f8f8;
        .keep-l{
            padding: 20px;
            background: #fff;
            .single{
                padding: 20px;
                position: relative;
                background: $switchBg;

                .item{
                    img{
                        margin-right: 20px;
                        display: block;
                        width: 80px;
                        height: 80px;
                        /*border: 1px solid #fff;*/
                        /*background: #7f828b;*/
                    }
                    .text{
                        h3{
                            padding-bottom: 20px;
                            font-size: 20px;
                            color: $black;
                            font-weight: normal;
                        }
                        p{
                            font-size: $default-font-size;
                            color: $gray;
                        }
                    }
                }

                .num{
                    padding-top: 30px;
                    font-size: $default-font-size;
                    color: #999;
                    span+span{
                        margin-left: 15px;
                    }
                }

                .btn{
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                }
                .add-follow{
                    position: absolute;
                    top:20px;
                    right: 20px;
                    background: #edf4f9;
                    border: none;
                    font-size: 14px;
                    color: #666;
                    i{
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                    }
                }
            }

            .switch-sort{
                padding: 30px 0 10px;
                span,a{
                    display: inline-block;
                    vertical-align: bottom;
                }
                span{
                    margin-right: 10px;
                    font-size: 20px;
                    font-weight: bold;
                }
                a{
                    font-size: $default-font-size;
                    color: $gray;
                }
                time{
                    color: $gray;
                }
                .cur{
                    color: $black;
                    font-weight: bold;
                }
            }

            .problem_list{
                margin-top: 12px;
                ul{
                    li{
                        font-size: 14px;
                        line-height: 26px;
                        position: relative;
                        margin-top: 20px;
                        border-bottom: 1px solid #ccc;
                        &:last-child{
                            border-bottom: 0;
                        }
                        .problem_list_title{
                            div{
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                overflow: hidden;
                                background-color: #ccc;
                                img{
                                    width: 100% !important;
                                    max-height: 100% !important;
                                }
                            }
                            p{
                                width: 100%;
                                padding-left: 40px;
                                box-sizing: border-box;
                                a{
                                    color: $black;
                                    &:hover{
                                        color: $orange;
                                    }
                                }
                            }
                        }
                        .problem_list_bottom{
                            span{
                                color: #999;
                                margin: 0 5px;
                                line-height: 30px;
                                i{
                                    margin-right: 3px;
                                }
                            }
                        }
                    }
                }
            }

            .problem_list{
                .list{
                    li{
                        h3{
                            font-size: $mid-font-size;
                            color: $black;
                        }
                        .providers{
                            .usser-logo{
                                float: left;
                                display: block;
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                            }
                            .describe{
                                margin-left: 60px;
                                width: 780px;
                                font-size: $mid-font-size;
                                color: $black;
                                .name{
                                    font-weight: bold;
                                }
                                .info{
                                    .dec{
                                        display: inline-block;
                                        padding-right: 30px;
                                    }
                                    a{
                                        margin-left: 15px;
                                        color: #11a9e8;
                                    }
                                }
                                .num-info{
                                    font-size: $default-font-size;
                                    color: $gray;
                                    .c-margin{
                                        margin: 0 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .keep-r{
            p.capsuleItem{
                color: $orange;
                padding: 0 10px;
                font-size: 14px;
                cursor: pointer;
                line-height: 28px;
                margin-right: 15px;
                position: relative;
                border-radius: 30px;
                display: inline-block;
                border: 1px solid #ccc;
                &.cur, &:hover{
                    color: #fff;
                    border-color: $orange;
                    background-color: $orange;
                }
                i{
                    top: -6px;
                    color: #ccc;
                    right: -17px;
                    cursor: pointer;
                    font-size: 16px;
                    position: absolute;
                    &:hover{
                        color: red;
                    }
                }
                .add-i{
                    top:-10px;
                    right: -25px;
                    width: 16px;
                    margin-right: 10px;
                }
            }

            .all-topic,.follow{
                background: #fff;
                h4{
                    padding: 15px 17px;
                    font-size: $max-font-size;
                    font-weight: normal;
                }
                .all-list{
                    padding: 10px 10px 10px 15px;
                    p{
                        margin-bottom: 15px;
                        color: #11a9e8;
                    }
                }
            }

            .follow{
                margin-bottom: 30px;
                .my-follow{
                    padding: 20px 20px 20px 20px;
                    .li{
                        position: relative;
                        padding: 20px 0;
                        height: 81px;
                        border-bottom: 1px solid #ddd;
                        cursor: pointer;
                        .icont,.txt{
                            float: left;
                        }
                        .icont{
                            margin-right: 10px;
                            display: block;
                            width: 40px;
                            height: 40px;
                            border: 1px solid #ddd;
                        }
                        .txt{
                            h5{
                                font-weight: normal;
                                font-size: $mid-font-size;
                                color: $black;
                            }
                            div{
                                font-size: $default-font-size;
                                color: $gray;
                            }
                        }
                        .del{
                            position: absolute;
                            top:20px;
                            right: 0px;
                        }
                        .el-icon-circle-close:before{
                            color: $gray;
                        }
                    }
                    .li:first-child{
                        height: 81px;
                    }
                    .li:last-child{
                        border-bottom: 1px solid transparent;
                    }
                    .crt{
                        // border: 1px solid #11a9e8;
                    }
                }
            }
        }
    }
</style>
